<script setup>
import AlloyFinger from 'alloyfinger'
import { toPng } from 'html-to-image'
import { closeToast, showLoadingToast, showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const list = route.query.list
const listArr = JSON.parse(list)

const af1 = ref(null)
const pic1 = ref(null)
const angle1 = ref(0)
const dis1 = ref(1)
const posX1 = ref(0)
const posY1 = ref(0)

const af2 = ref(null)
const pic2 = ref(null)
const angle2 = ref(0)
const dis2 = ref(1)
const posX2 = ref(0)
const posY2 = ref(0)

const pic1GetData = () => {
  af1.value = new AlloyFinger(pic1.value, {
    touchStart: function (e) {
      e.preventDefault()
      // console.log("touchStart");
    },
    rotate: function (evt) {
      // console.log("实现旋转");
      angle1.value += evt.angle
    },
    pinch: function (evt) {
      // console.log("实现缩放");
      dis1.value = evt.zoom
    },
    pressMove: function (evt) {
      // console.log("实现移动");
      posX1.value += evt.deltaX
      posY1.value += evt.deltaY
    }
  })
}

const pic2GetData = () => {
  af2.value = new AlloyFinger(pic2.value, {
    touchStart: function (e) {
      e.preventDefault()
      // console.log("touchStart");
    },
    rotate: function (evt) {
      // console.log("实现旋转");
      angle2.value += evt.angle
    },
    pinch: function (evt) {
      // console.log("实现缩放");
      dis2.value = evt.zoom
    },
    pressMove: function (evt) {
      // console.log("实现移动");
      posX2.value += evt.deltaX
      posY2.value += evt.deltaY
    }
  })
}

const finalImg = ref(null)

const cutPicture = () => {
  const cutbox = document.getElementById('cutbox')
  showLoadingToast({
    message: 'loading...',
    forbidClick: true,
    duration: 0, //值为 0 时，toast 不会消失
    overlay: true //是否显示背景遮罩层
  })
  return new Promise((resolve, reject) => {
    try {
      // 解决ios白屏问题 pixelRatio像素比率 值越大图片越清晰
      toPng(cutbox, { useCORS: true, pixelRatio: 3, quality: 1 }).then(() => {
        toPng(cutbox, { useCORS: true, pixelRatio: 3, quality: 1 }).then(() => {
          toPng(cutbox, {
            useCORS: true,
            pixelRatio: 3,
            quality: 1
          })
            .then((url) => {
              finalImg.value = url
              // 上传
              router.replace('/waiting')
              closeToast()
              resolve()
            })
            .catch((err) => {
              closeToast()
              showToast('合成失败,请稍后再试！')
              reject(err)
            })
        })
      })
    } catch (err) {
      closeToast()
      showToast('合成失败,请稍后再试！')
      reject(err)
    }
  })
}

onMounted(() => {
  pic1GetData()
  pic2GetData()
})
// 重选
const toRechoose = () => {
  router.replace({ path: '/index', query: { ctrl: 'rechoose' } })
}
// 打印
const toPrint = () => {
  cutPicture()
}
</script>
<template>
  <div class="preview box bg clmcenter">
    <p class="tips">点击某张图片可移动裁切</p>
    <div class="tempimgbox" id="cutbox">
      <img src="@/assets/img/tempimg.jpg" class="tempimg" />

      <div class="picbox">
        <div class="picitem pic1">
          <img :src="listArr[0].imgurl" ref="pic1" :style="{
            transform:
              'translate(' +
              posX1 +
              'px,' +
              posY1 +
              'px) scale(' +
              dis1 +
              ')  rotate(' +
              angle1 +
              'deg)'
          }" />
        </div>
        <div class="picitem pic2">
          <img src="@/assets/img/img2.jpg" />
        </div>
        <div class="picitem pic3">
          <img src="@/assets/img/img3.jpg" />
        </div>
        <div class="picitem pic4">
          <img :src="listArr[1].imgurl" ref="pic2" :style="{
            transform:
              'translate(' +
              posX2 +
              'px,' +
              posY2 +
              'px) scale(' +
              dis2 +
              ')  rotate(' +
              angle2 +
              'deg)'
          }" />
        </div>
      </div>
    </div>
    <img src="@/assets/img/line.png" class="line" />
    <div class="btnbox">
      <img src="@/assets/img/btn_rechoose.png" class="btn_rechoose" @click="toRechoose" />
      <img src="@/assets/img/btn_print.png" class="btn_print" @click="toPrint" />
    </div>
    <!-- <img :src="finalImg" class="finalImg" v-show="finalImg != null" /> -->
  </div>
</template>

<style lang="scss" scoped>
.preview {
  .tips {
    font-size: 24px;
    color: #ffffff;
    letter-spacing: 2px;
  }

  .tempimgbox {
    position: relative;
    width: 590px;
    height: 771px;
    margin-top: 30px;

    .tempimg {
      width: 100%;
    }

    .picbox {
      position: absolute;
      top: 202px;
      left: 271px;
      width: 285px;
      height: 217px;
      display: grid;
      grid-template-columns: repeat(2, 140px);
      grid-template-rows: repeat(2, 106px);
      gap: 5px;

      .picitem {
        width: 140px;
        height: 106px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .line {
    width: 647px;
    margin-top: -5px;
  }

  .btnbox {
    position: relative;
    z-index: 9;
    margin-top: 44px;
    width: 647px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    img {
      width: 316px;
    }
  }

  .finalImg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
